﻿@{
    ViewData["Title"] = "IndexFileDemo";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>IndexFileDemo</h1>
<div id="app">
    
    <hr />
    <h3>1.第一种上传文件（图片）走按钮提交，formData传值</h3>
    <el-upload action="#"
               list-type="picture-card"
               :limit="3"
               show-file-list
               :auto-upload="false"
               :on-change="changeFile"
               :before-upload="beforeAvatarUpload"
               multiple>
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="上传" />
    </el-dialog>
    <el-button v-on:click="hhhh">提交</el-button>
    @*<div class="submitFeedbackBtn" v-on:click="hhhh">提交</div>*@
    @*......*@
    <hr />
    <h3>2.第二种上传文件（图片）也是走action</h3>
    <el-upload class="upload-demo"
               action="/MailTest/uploadFile"
               :on-preview="handlePreview"
               :on-remove="handleRemove"
               :on-success="handleok"
               :on-change="changeFile"
               :file-list="fileList"
               list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    @*......*@
    <hr />
    <h3>3.直接通过action传值，使用官方的钩子函数</h3>
    <el-upload class="avatar-uploader"
               action="/MailTest/uploadImg"
               @*:on-change="changeFile"*@
               :show-file-list="false"
               :on-success="handleAvatarSuccess"
               :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            imageUrl: '',
            dataList: [],
            imageUrl:'',
            human_picture:'',
        },
        methods: {
            hhhh: function() {
                //跳转到显示页面
                //window.location.href = "/engage_resume/Index";
                // 首先判断是否上传了图片，如果上传了图片，将图片存入到formData中
                const formData = new FormData();
                console.info("进了方法提" + this.dataList);
                this.dataList.forEach((item, index) => {
                    console.log(item);
                    formData.append(index, item);
                });
                axios.post("/MailTest/uploadFile", formData).then(res => {
                    res.data.forEach((item, index) => {
                        alert(item);
                    })

                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleok(response, file, fileList) {
                console.info(response);
            },
            //图片的方法 成功
			handleAvatarSuccess(res, file) {

				this.imageUrl = URL.createObjectURL(file.raw);
				//接收图片路径
				var luJin=res;
				//接收图片名字
				var imgName="";
				//截取  文件名多长 文件夹
				imgName=luJin.slice(8);
                //数据库内的图片文件名称赋值
				this.human_picture=imgName;
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
            changeFile(file, fileList) {
                //将每次图片数组变化的时候，实时的进行监听，更改数组里面的图片数据
                var arr = [];
                fileList.forEach((item) => {
                    arr.push(item.raw);
                });
                this.dataList = arr;
                console.log(arr);
            }

        },
        mounted: function() {
        }
    })
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>